import React from 'react'
import wifi from '../../static/WIFI.png'
import WeiXin from '../../static/WeiXin.png'
import xinhao from '../../static/xinhao.png'
import dian from '../../static/dian.png'
import { Badge, TabBar } from 'antd-mobile'
// import { FriendsO ,HomeO, Search, SettingO } from '@react-vant/icons'
import {AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,} from 'antd-mobile-icons'
import { Outlet,useNavigate } from 'react-router-dom'


type Props = {}

function index({}: Props) {
  const navigate=useNavigate()
  const tabs = [
    {
      key: '/home/homes',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/home/find',
      title: '找房',
      icon: <MessageFill />,
      badge: '5',
    },
    {
      key: '/home/publics',
      title: '发布',
      icon: (active: boolean) =>
        active ? <UnorderedListOutline /> : <UnorderedListOutline />,
      badge: '99+',
    },
    {
      key: '/home/message',
      title: '消息',
      icon: <MessageOutline />,
      badge: '99+',
    },
    {
      key: '/home/my',
      title: '我的',
      icon: <UserOutline />,
    }
  ]
  //tabbar切换
  const setActiveKey=(key:any)=>{
    navigate(key)
  }
  return (
    <div className='box'>
      <header>
        <img src={dian} />
        <img src={wifi} />
        <img src={WeiXin} />
        <img src={xinhao} />
      </header>
      <main>
        <Outlet />
      </main>
      <footer>
        <TabBar onChange={setActiveKey}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </footer>
    </div>
  )
}

export default index